<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="author" content="SmartWiki" />
    <link rel="shortcut icon" href="https://wiki.iminho.me/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>找回密码 - MxsDoc</title>
	<link href="css/logo/logo.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="static/styles/styles.css" rel="stylesheet">
    <link href="static/bootstrapQ/qiao.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="static/scripts/jquery.min.js"></script>
    <!-- bootstrapQ -->
	<script src="static/bootstrapQ/qiao.js"></script>

	<script type="text/javascript" src="js/js_valicate.js"></script>
	<script src="js/md5.js"></script>
</head>

<body>
<div class="manual-reader">
    <header class="navbar navbar-static-top smart-nav navbar-fixed-top" role="banner">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/DocSystem">
                	<i class="logo small"></i> 
                	MxsDoc
                </a>            
            </div>
            <span style="width: 120px;font-size: 24px;font-weight: bold;font-family: '宋体';margin: 10px 0px;display: inline-block;">找回密码</span>
			<div style="display: inline-block;float: right;padding: 10px;">
				<a href="/DocSystem">返回主页</a>
			</div>
        </div>
    </header>

	<div style="height: 65px;"></div>
	<div id="wrapper">
		    <div style="background: white;height: 700px;padding-top: 5%;">
		    	<div id="changePwdForm">
		    		<div id="changePwd1" style="width: 500px;margin: 0px auto;background: white;padding: 50px 0px;border: 1px lightgrey solid;" class="clearfix">
			    		<div id="userIdDiv">
			    			<div class="col-xs-4 text-center">
			    				<label class="p8">账号</label>
			    			</div>
			    			<div class="form-group col-xs-8">
			    				<input type="text" class="form-control" id="username" name="username" needvalicate=true valicate="_required _minlen=8 _maxlen=50 _emailOR_tel" placeholder="邮箱/手机号"/>
			    			</div>
			    		</div>
			    		
			    		<div>
			    			<div class="col-xs-4 text-center">
			    				<label class="p8">验证码</label>
			    			</div>
			    			<div class="form-group col-xs-5">
			    				<input type="text" class="form-control" maxlength="6" id="code" name="code" needvalicate=true valicate="_required _n"  placeholder="请输入验证码"/>
			    			</div>
			    			<div class="col-xs-3">
			    				
			    				<input type="button" id="svc" class="mybtn m3" second="60" onclick="sendVerifyCode(this);" value="获取验证码"/>
			    			</div>
			    		</div>
			    		<div>
			    			<div class="col-xs-12 text-center">
			    				<hr/>
			    				<button class="mybtn-primary" onclick="nextStep();" style="width: 198px;height: 42px;">下一步</button>
			    			</div> 
			    		</div>
			    	</div>
			    	
			    	
			    	<div id="changePwd2" style="display: none;width: 500px;margin: 0px auto;background: white;padding: 50px 0px;border: 1px lightgrey solid;" class="clearfix">
			    		<div>
			    			<div class="col-xs-4 text-center">
			    				<label class="p8">密码</label>
			    			</div>
			    			<div class="form-group col-xs-8">
			    				<input id="pwd" name="pwd" type="password" needvalicate="true" valicate="_required _minlen=6 _maxlen=18" class="form-control" placeholder="6-18位，可由数字字母特殊字符组成"/>
			    			</div>
			    		</div>
			    		
			    		<div>
			    			<div class="col-xs-4 text-center">
			    				<label class="p8">确认密码</label>
			    			</div>
			    			<div class="form-group col-xs-8">
			    				<input id="pwd2" name="pwd2" type="password" needvalicate="true" valicate="_required _minlen=6 _maxlen=18 _equals=pwd" class="form-control" placeholder="请填写重复密码"/>
			    			</div>
			    		</div>
			    		<div>
			    			<div class="col-xs-12 text-center">
			    				<hr/>
			    				<button class="mybtn-primary" onclick="changePwd();" style="width: 198px;height: 42px;">更新密码</button>
			    			</div>
			    		</div>
			    	</div>
		    	
		    	</div>
		    </div>
	</div>
	<footer class="footer">
       <div class="container">
           <div class="row text-center">
               <ul>
                   <li><a href="#">MxsDoc</a></li>
                   <li>&nbsp;·&nbsp;</li>
                   <li><a href="#" target="_blank">意见反馈</a> </li>
               </ul>

           </div>
       </div>
	</footer>    
</div>		
<script type="text/javascript">
	var form1_errorMsg = {
		//注册
		'pwd2':{'_required':'密码不能为空。','_minlen':'密码最小长度为6位。','_maxlen': '密码最长18位','_equals':'两次密码输入不相同，请重新输入'},
		'code':{'_required':'验证码不能为空','_n': '验证码为数字'},
		//登录
		'username':{'_required':'用户名不能为空。','_emailOR_tel':'邮箱/电话格式不正确。','_minlen':'用户名最少为8位','_maxlen':'用户名最长为20位'},
		'pwd':{'_required':'密码不能为空。','_minlen':'密码最小长度为6位。','_maxlen': '密码最长18位'}
	};
			
	addValicate(form1_errorMsg);
			
	function nextStep(){
		console.log("nextStep");
		
		if(formAjaxSubmitCheck("changePwd1")){
			var username = $("#username").val();
			var code = $("#code").val();
	        $.ajax({
	            url : "/DocSystem/User/checkVerifyCode.do",
	            type : "post",
	            dataType : "json",
	            data : {
	            	userName:username,
	            	type: 1,
	            	verifyCode: code,	
	            },
	            success : function (ret) {
	                if( "ok" == ret.status ){
						bootstrapQ.msg({
							msg: "验证码校验成功！",
							type: "success",
							time: 2000
						});
						$('#changePwd1').hide(function(){$('#changePwd2').show();});
	                }else {
						bootstrapQ.msg({
							msg: "验证码错误！",
							type: "danger",
							time: 2000
						});
	                }
	            },
	            error : function () {
	                alert("服务器异常:退出登录失败");
	            }
	        });			
		}
	}
	
	//发送验证码邮件或者短息
	function sendVerifyCode()
	{
		var dom = $("#svc");
		
		$(dom).attr("disabled","disabled");
		$(dom).attr("second","60");
		remainTime(dom);
			
		$.ajax({
            url : "/DocSystem/User/sendVerifyCode.do",
            type : "post",
            dataType : "json",
            data : {
                 userName : $("#username").val(),
                 type: 1,
            },
            success : function (ret) {
                if( "ok" == ret.status ){
                	alert("验证码已发送，请注意查收！");
                }else {
                    alert("错误：" + ret.msgInfo);
                }
            },
            error : function () {
                alert("服务器异常:发送验证码失败");
            }
        });
	}
	
	function remainTime(){
		var dom = $("#svc");
		var i = $(dom).attr("second");
		$(dom).val(--i + "s"); 
		$(dom).attr("second",i);
	    var t = setTimeout(remainTime,1000);
	    if(i==0){
	    	clearTimeout(t);
	    	$(dom).removeAttr("disabled");
	    	$(dom).val("获取验证码");
	    }
	} 
	
	//修改密码处理函数
	function changePwd(){
		console.log("changePwd");
		
        $.ajax({
            url : "/DocSystem/User/changePwd.do",
            type : "post",
            dataType : "json",
            data : {
                 userName : $("#username").val(),
                 pwd : MD5($("#pwd").val()),
                 pwd2: MD5($("#pwd2").val()),
                 verifyCode : $("#code").val(),
            },
            success : function (ret) {
                if( "ok" == ret.status ){
					bootstrapQ.msg({
						msg: "密码修改成功,稍后将自动跳转到首页。",
						type: "success",
						time: 2000
					});
					setTimeout(function(){
						window.location.href = "/DocSystem";
					},1000);
                }else {
					bootstrapQ.msg({
						msg: "密码修改失败:" + ret.msgInfo,
						type: "success",
						time: 2000
					});
                }
            },
            error : function () {
				bootstrapQ.msg({
					msg: "可能发生了网络错误，请稍后重试！",
					type: "success",
					time: 2000
				});
            }
        });
    }
</script>
</body>
</html>
